<template>
  <div class="app-container">
    <el-row>
      <el-form :model="actFlashSale" :rules="rules" ref="actFlashSale" label-width="100px" class="demo-ruleForm">
        <el-divider content-position="left"><legend class="divider-line">新增每日秒杀</legend></el-divider>
        <el-col :span="20">
          <el-form-item label="活动名称" prop="actFlashSaleName">
            <el-input v-model="actFlashSale.actFlashSaleName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="活动日期" prop="actDate">
            <el-date-picker v-model="actFlashSale.actDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="应用渠道" prop="channel">
            <el-radio-group v-model="actFlashSale.channel">
              <el-radio v-for="item in channels" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="申请规则" prop="auditRule">
            <el-input type="textarea" :rows="3" v-model="actFlashSale.auditRule"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="活动描述" prop="remark">
            <el-input type="textarea" :rows="3" v-model="actFlashSale.remark"></el-input>
          </el-form-item>
        </el-col>

        <el-divider content-position="left"><legend class="divider-line">秒杀区间</legend></el-divider>
        <el-col :span="8">
          <el-form-item>
            <el-button type="warning" @click="addDomain" icon="el-icon-circle-plus-outline">添加</el-button>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="开始时间" prop="hourstart">
            <el-input-number v-model="actFlashSale.hourstart" :min="0" :max="24" :precision="0"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col class="add_norm" :span="16" v-for="(item, index) in actFlashSale.domains" :key="item.key">
          <el-form-item label="秒杀区间" required>
            <el-input-number v-model="item.hour" :min="0" :max="24" :precision="0"></el-input-number>
          </el-form-item>
          <el-button @click.prevent="removeDomain(item)" icon="el-icon-delete" style="margin-left: 40px" circle></el-button>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结束时间" prop="hourend">
            <el-input-number v-model="actFlashSale.hourend" :min="0" :max="24" :precision="0"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="24" style="margin-bottom: 60px">
          <el-form-item>
            <span class="form-word-hint">
              整点秒杀阶段，必须是0到24点整数，阶段时间从小到大填写，至少有开始和结束的时间点，是必须填写的，可以在开始和结束的时间段内添加不同的阶段，
              下一个阶段的开始时间是上一个阶段的结束时间。
            </span>
          </el-form-item>
        </el-col>

        <el-row :gutter="24">
          <div class="fixed-bottom-20">
            <el-button type="primary" @click="submitForm('actFlashSale')">立即提交</el-button>
            <el-button type="success" @click="back">返回</el-button>
            <el-button @click="resetForm('actFlashSale')">重置</el-button>
          </div>
        </el-row>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import { createActFlashSale } from "@/api/promotion.js";
import { Message } from "element-ui";
import { getCodeManager, codeToArray } from "@/api/all";
export default {
  name: "flashsaleadd",
  data() {
    return {
      channels: [],
      actFlashSale: {
        actFlashSaleName: "",
        actDate: "",
        channel: "1",
        hourAll: "",
        domains: [],
      },
      rules: {
        actFlashSaleName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" },
        ],
        auditRule: [
          { required: true, message: "请输入申请规则", trigger: "blur" },
          { min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" },
        ],
        remark: [
          { required: true, message: "请输入活动描述", trigger: "blur" },
          { min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" },
        ],
        actDate: [{ required: true, message: "请选择活动日期", trigger: "change" }],
        channel: [{ required: true, message: "请选择渠道", trigger: "change" }],
        hourstart: [{ required: true, message: "填写秒杀区间", trigger: "blur" }],
        hourend: [{ required: true, message: "填写秒杀区间", trigger: "blur" }],
      },
    };
  },
  created() {
    getCodeManager("CHANNEL", () => {
      this.channels = codeToArray("CHANNEL");
    });
  },
  methods: {
    addDomain() {
      this.actFlashSale.domains.push({
        hour: "",
        key: Date.now(),
      });
    },
    removeDomain(item) {
      var index = this.actFlashSale.domains.indexOf(item);
      this.actFlashSale.domains.splice(index, 1);
    },
    submitForm(actFlashSale) {
      this.$refs[actFlashSale].validate((valid) => {
        if (valid) {
          let hours = [];
          hours.push(this.actFlashSale.hourstart);
          for (let i in this.actFlashSale.domains) {
            let hour = this.actFlashSale.domains[i].hour;
            if (hour == undefined) {
              Message.error("请填写秒杀区间");
              return;
            }
            hours.push(hour);
          }
          hours.push(this.actFlashSale.hourend);
          for (let i = 0; i < hours.length - 1; i++) {
            if (hours[i] >= hours[i + 1]) {
              Message.error("秒杀区间后一个时间段要比前一个时间段大");
              return;
            }
          }
          this.actFlashSale.hourAll = hours.join(",");
          createActFlashSale(this.actFlashSale).then((res) => {
            if (!res.data.success) {
              Message.error(res.data.message);
              return;
            }
            Message.success("操作成功");
            this.resetForm("actFlashSale");
            history.back();
          });
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    back() {
      history.back();
    },
  },
};
</script>
<style scoped>
/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/deep/ .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
/deep/ [class*="el-col-"] {
  float: none;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.add_norm {
  display: flex;
}
.add_norm .el-form-item {
  width: 35%;
}
.add_norm .el-button {
  height: 36px;
  margin-left: 15px;
}

.el-divider {
  margin: 30px 0;
}
.divider-line {
  font-size: 20px;
  font-weight: 300;
}
</style>
